Vue.js: ref と reactive

Vue.jsのref と reactive について

使い分けについて公式では、まだベストプラクティスは分からないと書いている

現段階ではrefとreactiveのベストプラクティスを決めるのは時期尚早です。

世界中からのフィードバックを踏まえて最終的にはベストプラクティスを作成して提供します。

この記事がわかりやすかった：【Vue.js】ref と reactive どっちを使う？

reactive

オブジェクトや配列などのオブジェクト型にのみ機能する

メリット

Options API の Data の定義と似ている

まとまったデータを定義するのに向いている

デメリット

通常のオブジェクトと区別がつきづらい

https://gyazo.com/35d6974ba71d96164ab8c1be6d09b6d1

reactive メソッドの返り値の型は元のオブジェクトのままなので、変数の型情報を見ただけでは、それが通常のオブジェクトなのか、リアクティブな値なのは判別できない

分割代入するとリアクティブ性が失われる

これが大きいデメリットと主張している

code:ts

const state = reactive({

count: 0,

});

let { count } = state;

こうするとcountはリアクティブじゃなくなる

分割代入を利用したい場合は、toRefsを使って ref に変換する

let { count } = toRefs(state);

ref

オブジェクトや配列などのオブジェクト型だけでなく、プリミティブ型もいける

Web記事によってはプリミティブ型専用と説明されていたりするが、型<T>を渡せばオブジェクト型もいける

メリット

リアクティブなデータか判別しやすい

const count = ref(0) // Ref<number>

型情報を見れば、Ref 型だと分かる

デメリット

常に .value でアクセスする必要がある

なぜref が推奨か？

Composables 関数として公開するときは常に Ref 型とする

これが公式で推奨されているから

https://vuejs.org/guide/reusability/composables.html#conventions-and-best-practices

You have probably noticed that we have been exclusively using ref() instead of reactive() in composables. The recommended convention is for composables to always return a plain, non-reactive object containing multiple refs. This allows it to be destructured in components while retaining reactivity:

例えば、reactive で公開していると、以下のような分割代入を使うとリアクティブ性が失われてしまう

const { data, loading, error } = useFetch('/api/users')